class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [

            ],
            start: 0,
            pagesize: 12,
            state: '',
            ishide: 'none',
            keyword: '',
            type: 1,
            counts: [],
            pagestart: 0,
            undercarriage:!1,
        };
    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize, state,undercarriage } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            if(undercarriage){
                this.getdown(start)
            }else{
                this.freshlist(start, state)
            }
        })
    }
    setpage(e) {
        let { pagesize, state, start,undercarriage } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            if(undercarriage){
                this.getdown(start)
            }else{
                this.freshlist(start, state)
            }
        })
    }
    formatlist(list) {

        var that = this;
        var listitem = [];
        list.map((x, i) => {
            var state = '上架';

            if (x.bollowed == 0) {
                x.bollowed = '可借阅';
            }
            if (x.bollowed == 1) {
                x.bollowed = '不可借阅';
            }
            if (x.bollowed == 2) {
                x.bollowed = '借完';
            }
            if (x.state == 1) state = '下架';
            if (x.state == 2) state = '售空';

            this.setState({ state: x.state });
            let src = ''
            if (x.thumbPicPath.indexOf('http') == -1) {
                src = `${API_HEAD}imgs/` + x.thumbPicPath
            } else {
                src = x.thumbPicPath
            }
            listitem.push(
                <div key={i} className='item panel-body'>
                    <div className="img">
                        <img src={src} />
                    </div>
                    <div className='word'>
                        <div>
                            <p className='book'>书名：{x.name}</p>
                        </div>

                        <div>
                            <p>标签：{x.labels}</p>
                        </div>
                        <div>
                            <p className="order" onClick={this.toorder.bind(this, x.id)}><span>排序</span>：{x.orders}</p>
                            <p id={'ishide' + x.id} className='ishide'><input type="text" id={x.id} placeholder="请输入1-999的数字排序" />
                                <span onClick={this.setcategoryorder.bind(this, x.id)} >确认</span><span onClick={this.toorder.bind(this, x.id)}>取消</span></p>
                        </div>

                        <div>
                            <p>库存: <span>{x.kc}</span></p>
                            <p>状态: <span>{x.bollowed}</span></p>

                        </div>
                        <div className='btns'>
                            <button onClick={that.edit.bind(that, x.id, 0)} className='btn btn-primary center'>编辑</button>
                            <button style={{ display: x.state != 2 ? "" : "none" }} onClick={that.setshow.bind(that, x.id, x.state)} className='btn btn-default center'>{x.state == 0 ? "上架" : "下架"}</button>
                            <button style={{ display: x.state == 2 ? "" : "none" }} className='btn btn-default center'>售空</button>

                        </div>

                    </div>
                </div>
            )
        });
        return listitem;

    }
     // 上架下架
     setshow(e, i) {
         console.log(1111);
         
        let { start } = this.state
        setstate({id:e,state:i}, res => {
            if (res.issuccess == 1) {
                alert(`${i == "1" ? '上架' : '下架'}成功`)
                this.freshlist(start)
            }
        })

    }

    edit(e, i, s) {
        var that = this,{start}=that.state;
        var id = e;
        if (i == 0) { //编辑
            window.location.href = './books.html?id=' + e
        }
        //  else if (i == 1) {//上架
        //     setstate({ id, state: s }, res => {
        //         if (res.issuccess == 1) {
        //             this.freshlist(start)
        //             // var list = that.state.list;
        //             // var newlist = [];
        //             // list.forEach(e => {
        //             //     var item = e;
        //             //     if (item.id == id) {

        //             //         if (item.state == '0') {
        //             //             alert('上架成功')
        //             //             item.state = 1

        //             //         } else {
        //             //             alert('下架成功')
        //             //             item.state = 0
        //             //         }
        //             //     }


        //             //     newlist.push(item)
        //             // });
        //             // var listitem = this.formatlist(newlist)
        //             // that.setState({
        //             //     list: newlist,
        //             //     listitem
        //             // })
        //         }

        //     })
        // } else {

        // }


    }
    getnew() {
        window.location.href = './books.html?isnew=0'
    }
    getaward(e) {
        var that = this;
        var { id, type, pagesize, start } = that.state;

        getawardlist({ id, type, pagesize, start }, res => {
            // console.log(res)
            if (res.issuccess == 1) {
                var listitem = that.formatlist(res.list);
                that.setState({
                    listitem,
                    list: res.list
                })
            }

        })
    }



    componentDidMount() {
        this.freshlist(0);


        // getcategorylist(res=>{
        //     if(res.issuccess==1){
        //         $.cookie('categorylist',JSON.stringify(res.list))
        //     }
        // })
    }
    inputschange(e) {

        var txt = e.target.value;
        this.setState({
            keyword: e.target.value
        })
    }
    cha(e) {
        var { keyword, pagesize, start } = this.state;

        var data = [keyword, pagesize, start]
        chabook(keyword, pagesize, start, res => {
            if(res.issuccess==1){
                if (res.list) {
                    this.setlist(res.list);
    
                }
            }
        })
    }
    setlist(list) {

        var that = this;

        var listitem = [];
        if (list.length > 0) {

            list.forEach((x, i) => {

                let src = ''
                if (x.thumbPicPath.indexOf('http') == -1) {
                    src = `${API_HEAD}imgs/` + x.thumbPicPath
                } else {
                    src = x.thumbPicPath
                }

                listitem.push(
                    <div key={i} className='item panel-body'>
                        <div className="img">
                            <img src={src} />
                        </div>
                        <div className='word'>
                            <div>
                                <p className='book'>书名：{x.name}</p>
                            </div>

                            <div>
                                <p>标签：{x.labels}</p>
                            </div>
                            <div>
                                <p className="order" onClick={this.toorder.bind(this, x.id)}>排序：{x.orders}</p>
                                <p id={'ishide' + x.id} className='ishide'><input type="text" id={x.id} placeholder="请输入1-999的数字排序" />
                                    <span onClick={this.setcategoryorder.bind(this, x.id)} >确认</span><span onClick={this.toorder.bind(this, x.id)}>取消</span></p>
                            </div>

                            <div>
                                <p>库存: <span>{x.kc}</span></p>
                                <p>状态: <span>{x.bollowed}</span></p>

                            </div>

                            <div className='btns'>
                                <button onClick={that.edit.bind(that, x.id, 0)} className='btn btn-primary center'>编辑</button>
                                <button style={{ display: x.state != 2 ? "" : "none" }} onClick={that.setshow.bind(that, x.id, x.state)} className='btn btn-default center'>{x.state == 0 ? "上架" : "下架"}</button>
                                <button style={{ display: x.state == 2 ? "" : "none" }} className='btn btn-default center'>售空</button>

                            </div>

                        </div>
                    </div>
                )
            })
        }
        else {
            listitem.push(
                <tr key='0'>暂无数据</tr>)
        }
        this.setState({ list, listitem })

    }
    toorder(id) {
        let { ishide } = this.state;
        $('#ishide' + id).toggle();

        this.setState({ ishide });
        $("#" + id).val('');
    }
    setcategoryorder(id) {
        let orders = $("#" + id).val(), data;

        if (isNaN(orders) || orders < 1 || orders > 999) {
            alert('请输入1-999的正整数');
            return;
        }
        orders = Math.floor(orders);
        data = { id, orders };
        mybooksetorder(data, res => {
            if (res.issuccess == 1) {
                alert("设置成功");
            }
        });
        this.freshlist();
    }


    //获取下架图书
    getdown(start){
        let { pagesize } = this.state;
       getdownbook({ pagesize, start }, res => {
         console.log(res)
        if (res.issuccess == 1) {
            if (start == 0) {
                let pagecount = Math.ceil(res.total / pagesize);
                this.setpager(pagecount, start);
                this.setState({ start, total: res.total })
            }
            var listitem = this.formatlist(res.list);
            this.setState({ listitem,list: res.list,undercarriage:!0})
        }

    }) 
        }
    freshlist(start) {

        let { pagesize } = this.state;
        getlist({ pagesize, start }, res => {
            // console.log(res)
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                var listitem = this.formatlist(res.list);
                this.setState({
                    listitem,
                    list: res.list
                })
            }

        })

    }
    
    render() {
        // 
        var { listitem } = this.state;
        return (
            <div className="breadLinebox">
                <div className='content_wrap panel-default content_wrap'>
                <div className='breadLine '>
                    <div className="img">
                        当前位置 > 图书管理
                        </div>

                </div>
                <div className='btns'>
                    <input type="text" onChange={this.inputschange.bind(this)} />
                    <button onClick={this.cha.bind(this)}>查询</button>

                </div>
                <div className='btns'>
                    <button className='btn add btn-primary center ' onClick={this.getnew.bind(this)} id='btnimg_add'> <img src={Constant.ADD} /> 添加图书</button>
                    <button className='btn add btn-primary center down' onClick={this.getdown.bind(this,'0')} id='btnimg_down'> 查看下架图书</button>
                </div>
                {/* <div className='btns'>
                        <button className='btn add btn-primary center ' onClick={this.getaward.bind(this) }style={{marginRight:"30px"}}> 大奖作品</button>
                        <button className='btn add btn-primary center ' onClick={this.getlists} > 名家大师</button>
                    </div> */}

                <div className='goods panel-body'>
                    {listitem}
                </div>
                <div className="pagerbox">
                    <p>共{this.state.total}条</p>
                    <Pager counts={this.state.counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={this.state.pagestart} />
                </div>
                {/* <Pager counts={this.state.counts} click={this.clickpage.bind(this)} index={this.state.pagestart}/> */}
            </div>
            </div>
        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            {/* <LeftMenu code='1'/> */}
            <LeftMenu code='main' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)